<template>
  <div class="image-gallery">
    <!-- 主图展示区 -->
    <div class="main-image">
      <img :src="mainImage" alt="main product image" />
    </div>
    <!-- 小图展示区 -->
    <div class="thumbnail-wrapper">
      <div
          class="thumbnail"
          v-for="(image, index) in thumbnails"
          :key="index"
          @click="setMainImage(image)"
      >
        <img :src="image" alt="product thumbnail" />
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'ProductImageGallery',
  props: {
    images: {
      type: Array,
      required: true,
    },
  },
  data() {
    return {
      mainImage: '',
      thumbnails: [],
    };
  },
  created() {
    this.initializeGallery();
  },
  methods: {
    initializeGallery() {
      this.mainImage = this.images[0];
      this.thumbnails = this.images.slice(1, 7); // 获取前6个图片作为小图
    },
    setMainImage(image) {
      this.mainImage = image;
    },
  },
};
</script>

<style>
.image-gallery {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.main-image img {
  width: 100%;
  max-width: 500px; /* 根据需要调整 */
  margin-bottom: 20px;
}
.thumbnail-wrapper {
  display: flex;
  justify-content: center;
  gap: 10px;
}
.thumbnail img {
  width: 100px; /* 根据需要调整 */
  cursor: pointer;
  transition: transform 0.2s ease;
}
.thumbnail img:hover {
  transform: scale(1.1);
}
</style>